<!DOCTYPE html>
<html>
  <head>
    <style>
      option {color: green}
      optgroup {color: red}
      optgroup:disabled {color: green}
      optgroup[disabled]:disabled + optgroup {color: green}
      optgroup:not(:disabled) {color: red}
      optgroup[disabled]:disabled > option:default {color:blue}
      optgroup:disabled > option:default ~ option {color:blue}
    </style>
  </head>
  <body onload='document.getElementById("ogone").setAttribute("disabled", "disabled");
                document.getElementById("one").setAttribute("selected", "selected");'>
    <select size="7">
      <optgroup id="ogone" label="There should be no red">
        <option id="one">This should be blue</option>
        <option id="two">This should be blue</option>
      </optgroup>
      <optgroup id="ogtwo" label="There should be no red">
        <option id="three">There should be no red</option>
        <option id="four">There should be no red</option>
      </optgroup>
    </select>
  </body>
</html>
